<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:http="http://www.w3.org/1999/xhtml">
<head th:include="include/fore/header::html"></head>
<link href="css/fore/show.css" rel="stylesheet">
<body>
<!--引入共有头部-->
<div th:replace="include/fore/top::html"></div>
<link rel="stylesheet" href="css/lightbox.min.css">
<div id="app">
    <!--页面主体-->
    <div id="main">
        <div th:replace="include/tips::html"></div>
        <div class="am-container">
            <div class="am-g main-body">
                <div class="am-u-sm-12 am-u-lg-12">
                    <span class="crumbs"><a :href="'/categories?cid='+article.category.id+'&name='+article.category.name+'&start=0'">{{article.category.name}}</a> <i class="am-icon-caret-right"></i> 正文</span>
                    <div class="content">
                        <div class="article">
                                <div class="zhy-article-top">
                                    <div>
                                        <article-top>
                                            <div class="article-title">
                                                <h1>{{article.title}}</h1> <div class="article-info-type am-badge am-badge-success" style="background-color: #00b5ad;">{{article.type}}</div>
                                            </div>
                                            <div class="article-info">
                                                <span v-if="article.type==='转载'&&article.originalAuthor.length>0"><a class="articleCategoryColor" :href="article.originalUrl">{{article.originalAuthor}}</a></span><span v-else>{{article.author.username}}</span><span> 发布于 <a class="articleCategoryColor" :href="'/date?date='+splitDate(article.publishDate)+'&start=0'">{{article.publishDate | formatDateFilter}}</a>&nbsp;&nbsp;&nbsp;阅读 {{read_count}}</span>
                                            </div>
                                            <div class="article-tag">
                                                <span class="tag-item" v-for="t in article.tagList"><a :href="'/article_of_tag?tid='+t.id">{{t.name}}</a></span>
                                            </div>
                                        </article-top>
                                    </div>
                                </div>
                                <div class="article-content" v-html="article.content">
                                </div>
                            <hr>
                            </div>
                        </div>
                        <div style="width: 80%; margin: 0 auto 20px auto;">
                            <a href="#nowhere" @click="like_it()" class="article-like" v-if="!liked"><span class="like-button"><img src="/img/fore/like.png" style="width: 21px;"> 喜欢 | {{article.likes}}</span></a>
                            <span class="liked-button" v-else><img src="/img/fore/liked.png" style="width: 21px;"> 喜欢 | {{article.likes}}</span>
                            <a class="share-article" style="border-color: #e05244;"
                               :href="'http://service.weibo.com/share/share.php?appkey1343713053=&title='+article.title+'&url=http://www.siriusshum.club/article?aid='+article.id+'&pic='+share_pic+'&searchPic=true&style=simple'"><span class="am-icon-weibo" style="color: #e05244; font-size: 26px;"></span></a>
                            <a class="share-article" style="border-color: #00bb29;" href="#nowhere" data-am-modal="{target: '#doc-modal-1'}"><span class="am-icon-wechat" style="color: #00bb29; font-size: 23px;"></span></a>
                            <a class="share-article" style="border-color: #0e90d2;"
                               :href="'http://connect.qq.com/widget/shareqq/index.html?url=http://www.siriusshum.club/article?aid='+article.id+'&sharesource=qzone&title='+article.title+'&pics='+share_pic+'&summary='+article.description"><span class="am-icon-qq" style="color: #0e90d2; font-size: 23px;"></span></a>
                        </div>
                        <div style="width: 90%; margin: 0 auto; display: block;">
                            <span class="change-article" style="float: left;" v-if="article.last != null"><img src="/img/fore/left.png" style="height: 13px;">上一篇: <a :href="'/article?aid='+article.last.id">{{article.last.title | cutContent}}</a></span>
                            <span class="change-article" style="float: right;" v-if="article.next != null">下一篇: <a :href="'/article?aid='+article.next.id">{{article.next.title | cutContent}}</a><img src="/img/fore/right.png" style="height: 17px;"></span>
                        </div>
                        <div class="article-comment">
                            <span style="font-weight: bold;">{{commentsCount}} 条评论</span>
                            <a style="float: right;" href="#nowhere">
                                <!--<span class="am-icon-exchange"></span> 切换为时间排序-->
                            </a>
                            <hr>
                            <div class="am-input-group am-input-group-primary" style="padding-top: 10px; margin-bottom: 10px;">
                                  <span class="am-input-group-btn">
                                    <button class="am-btn am-btn-primary" type="button" @click="comment(0)">发布</button>
                                  </span>
                                  <input type="text" class="am-form-field" placeholder="说点什么..." @keyup.enter="comment(0)" v-model.trim="comment_bean.content">
                            </div>
                            <article class="am-comment" v-for="c in comments" style="padding-top: 10px;">
                                <a href="#link-to-user-home">
                                    <img :src="c.answerer.face" alt="" class="am-comment-avatar" width="48" height="48"/>
                                </a>

                                <div class="am-comment-main">
                                    <header class="am-comment-hd">
                                        <div class="am-comment-meta">
                                            <a class="am-comment-author">{{c.answerer.username}}</a>
                                            评论于 <time :datetime="c.createdAt">{{c.createdAt | formatDateFilter}}</time>
                                        </div>
                                    </header>

                                    <div class="am-comment-bd">
                                        <span v-if="c.parent != null">回复: <span style="color: #4183c4;">@{{c.parent.answerer.username}} </span></span>{{c.content}}
                                    </div>

                                    <div class="comment-button">
                                        <a href="#nowhere" @click="fun(c.id)" v-if="!comment_liked[c.id]"><span class="am-icon-heart"></span> {{c.likeCount}} </a>
                                        <a href="#nowhere" @click="not_fun(c.id)" v-else><span class="am-icon-heart" style="color: red;"></span> {{c.likeCount}} </a>
                                        <a href="#nowhere" @click="replyStatusOff(c.id)" v-if="isOnReply[c.id]==1"><span class="am-icon-reply"></span> 取消回复</a>
                                        <a href="#nowhere" @click="replyStatusOn(c.id)" v-else><span class="am-icon-reply"></span> 回复</a>
                                        <a href="#nowhere" @click="deleteComment(c.id)" v-if="loginUser==c.answerer.id"><span class="am-icon-trash"></span> 删除</a>
                                    </div>

                                    <div class="am-input-group am-input-group-primary am-animation-slide-bottom" style="margin: 0 15px 10px;" v-if="isOnReply[c.id]==1">
                                        <span class="am-input-group-btn">
                                            <button class="am-btn am-btn-primary" type="button" @click="comment(c.id)">回复</button>
                                        </span>
                                        <input :id="forCommentId(c.id)" type="text" class="am-form-field" :placeholder="'回复 '+c.answerer.username" @keyup.enter="comment(c.id)">
                                    </div>
                                </div>
                            </article>
                            <div v-if="commentsCount>0" style="margin-left: 40px"><div th:replace="include/page::html"></div></div>
                        </div>
                        <div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1" style="width: 170px; margin: 0 auto; top: 20%;">
                            <div class="am-modal-dialog">
                                <div class="am-modal-hd"><p style="font-size: 16px;">分享到微信</p>
                                    <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
                                </div>
                                <div class="am-modal-bd" id="qrcode" style="margin: 0 auto;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <div th:replace="include/footer::footer"></div></div>
</div>

<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">删除评论</div>
        <div class="am-modal-bd">
            码字不易，且删且珍惜
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" data-am-modal-confirm>确定</span>
        </div>
    </div>
</div>

<script src="js/all.js"></script>
<script src="js/qrcode.js"></script>
<script src="js/scroll.js"></script>
<script src="js/fore/detail.js"></script>
<script src="js/jweixin-1.4.0.js"></script>
<script src="js/lightbox-plus-jquery.min.js"></script>
<script>
    var data4Vue = {
        item: ''
    };
    //ViewModel
    var vue = new Vue({
        el: '#top',
        data: data4Vue
    });
</script>
</body>
</html>